<script setup lang="ts">
import { ref, reactive } from 'vue'
let data = reactive({
  data: [
    {
      name: '南阳',
      value: Math.floor(Math.random() * (100 - 0)) + 1
    },
    {
      name: '周口',
      value: Math.floor(Math.random() * (100 - 0)) + 1
    },
    {
      name: '漯河',
      value: Math.floor(Math.random() * (100 - 0)) + 1
    },
    {
      name: '郑州',
      value: Math.floor(Math.random() * (100 - 0)) + 1
    },
    {
      name: '西峡',
      value: Math.floor(Math.random() * (100 - 0)) + 1
    }
  ]
})

//WebSocket部分
var ws = new WebSocket("ws://localhost:8181");
ws.onopen = function (e) {
  console.log('Connection to server opened');
}
let sendMessage = function sendMessage(): void {
  ws.send('发送消息');
}

//当消息被接收会触发消息事件，响应的回调函数叫做onmessage
ws.onmessage = function (e) {
  data.data = JSON.parse(e.data);
  console.log(data.data);
}



</script>
<template>
  <div class="module-box">
    <div style="flex:0 1 30%">
      <dv-border-box1 style="width:100%;height:200px;">
        <dv-capsule-chart :config="data.data" style="width:300px;height:200px" />
      </dv-border-box1>
    </div>
    <div style="flex:0 1 40%">
      <dv-border-box1 style="width:100%;height:200px;">
        <dv-capsule-chart :config="data.data" style="width:300px;height:200px" />
      </dv-border-box1>
    </div>
    <div style="flex:0 1 30%">
      <dv-border-box1 style="width:100%;height:200px;">
        <dv-capsule-chart :config="data.data" style="width:300px;height:200px" />
      </dv-border-box1>
    </div>
  </div>
</template>